<template>
  <div class="body">
    <div class="main" v-show="!show">
      <Header :navList="navList"/>
      <div class="content">
        <div class="list-content">
          <div style="height: 100%;display: flex">
            <div style="width: 270px;">
              <div
                  style="height: 32px;line-height: 32px;font-size: 24px;color: #000000;display: flex;width: 270px;border-bottom: 2px solid #60A3D7;padding-bottom: 8px">
                <div style="width: 8px;height: 32px;background: #60A3D7;margin-right: 10px"></div>
                <div>{{ moreTitle }}</div>
              </div>
              <div style="padding-top: 8px">
                <div class="list" :class="{'is':active===index}" v-for="(item, index) in options"
                     @click="handleCheckList(item)" :key="index">{{ item.moduleName }}
                </div>
              </div>
            </div>
            <div style="width: 930px;padding-left: 24px">
              <div style="margin: 35px 0;font-size: 28px;text-align: center">{{ title }}</div>
              <div style="text-align: center;font-size: 14px;color: #4E5969">
                <span>作者：{{ userName }}</span>
                <span style="margin: 0 48px">来源：{{ moduleName }}</span>
                <span>发布时间：{{ createDate }}</span>
              </div>
              <el-divider></el-divider>
              <div class="table-box" v-html="content">
              </div>
<!--              <div v-show="type === '3'" style="display: flex;justify-content: center">-->
<!--                <div style="width: 700px;">-->
<!--                  <img :src="fileList.length > 0 ? fileList[0].filePath: ''"-->
<!--                       style="width: 100%;height: 100%;object-fit: cover;" alt=""/>-->
<!--                </div>-->

<!--              </div>-->
              <el-row v-show="type !== '3' && fileList.length > 0"> 附件列表：</el-row>
              <el-row v-show="type !== '3' && fileList.length > 0">
                <el-col
                    :span="24"
                    v-for="item in fileList"
                    :key="item.attachmentId"
                    style="padding: 12px 0 12px 12px"
                >
                  <el-link type="primary" @click="handleDownload(item.filePath)">{{
                      item.fileName
                    }}
                  </el-link>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
    <div class="a" v-show="show"></div>
  </div>

</template>

<script>
import { getDetailApi, getList, getMoreDetailApi } from "@/api/home";
// import Nav from "@/templates/Nav";
import Header from "@/templates/Layout/MoreHeader.vue";
import Footer from "@/templates/Layout/Footer.vue";
import { getBubbleSort } from "@/util/util";

export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      active: 0,
      fileList: [],
      navList: [],
      title: '',
      moreTitle: '',
      show: true,
      userName: '',
      moduleName: '',
      createDate: '',
      content: '',
      type: '',
      options: [],
      moreObj: {
        moduleId: '',
        code: ''
      },
      page: {
        pageNum: 1,
        pageSize: 15
      },
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
      if (this.$route.query.id) {
        this.type = this.$route.query.type
        const res = await getDetailApi(this.$route.query.id, this.$route.query.type)
        this.moreObj = {
          moduleId: res.moduleId,
          code: res.code
        }
        const moreList = await getMoreDetailApi({ moduleId: this.moreObj.moduleId, code: this.moreObj.code, ...this.page })
        if(moreList?.records){
          this.options = moreList.records[0].children
          this.moreTitle = moreList.records[0].moduleName
        }else{
          this.options = moreList[0].children
          this.moreTitle = moreList[0].moduleName
          moreList[0].children.forEach((item, index)=>{
            if(item.id === res.moduleId){
              this.active = index
            }
          })
        }

        this.title = res.name
        this.content = res.content
        this.userName = res.userName
        this.moduleName = res.moduleName
        this.createDate = res.createDate

        res.attachmentList.forEach((item) => {
          if (item.attrType === 1) {
            this.fileList.push(item);
          }
        });
      }
      this.$nextTick(() => {
        this.show = false
      });
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    handleDownload(path) {
      window.open(path);
    },
    handleCheckList(item){
      const {href} = this.$router.resolve({
        path: `/more`,
        query: {
          id: item.id,
          code: this.moreObj.code
        }
      });
      window.open(href, '_blank');
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}

.a {
  background: #ECF1F7;
}

.list {
  height: 48px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  background: #f4f4f5;
}

.list:not(:last-child) {
  border-bottom: 1px solid #cdcdcd;
}

.list:hover {
  background: #60A3D7;
  color: #fff;
}
.is {
  background: #60A3D7;
  color: #fff;
}



//.table-box table {
//  border-top: 1px solid #ccc !important;
//  border-left: 1px solid #ccc !important;
//}
//.table-box table td,
//.table-box table th {
//  border-bottom: 1px solid #ccc !important;
//  border-right: 1px solid #ccc !important;
//  padding: 3px 5px !important;
//}
//.table-box table th {
//  border-bottom: 2px solid #ccc !important;
//  text-align: center !important;
//}


//.table-box table{
//  border: 1px solid #ccc !important;
//}
//.table-box table th,.table-box table td{
//  border: 1px solid #ccc !important;
//}
//.table-box table td{
//  padding: 0 5px !important;
//}

.table-box {
  white-space:pre-wrap;
  padding:0 24px;

  table {
    border-collapse: collapse !important;
  }

  td, th {
    border: 1px solid #ccc !important;
    min-width: 50px !important;
    height: 20px !important;
  }

  th {
    background-color: #f1f1f1 !important;
  }


}
</style>
